<template>
    <div class="dataQueryParam_box geo_param box_style phoneBac" v-show="isShowParam">
        <div class="dataQueryParam_inner">
            <div class="param_header">
                <span>查询</span>
                <span
                    v-if="isPhone"
                    class="reset_btn_class margin_btn el-icon-close"
                    @click="closeQuery"
                ></span>
                <span
                    class="reset_btn_class el-icon-refresh-left"
                    @click="resetAllQueryParam"
                ></span>
                <div class="divider_line"></div>
            </div>

            <div class="all_param_inf">
                <div @click.stop="fousePoint">
                    <el-input
                        class="name_box_class"
                        id="name_input"
                        v-model="nameParam"
                        placeholder="名称"
                        clearable
                    ></el-input>
                </div>

                <div class="dataQueryParam_time">
                    <div class="time_inf">
                        <div class="title">
                            <img class="img_right" src="./theme/img/dataQueryParamtime.png" />
                            <span>日期</span>
                        </div>

                        <div class="dataQueryParam_time_box">
                            <el-date-picker
                                v-model="timeValue1"
                                :class="
                                    timeTsInf == 'timeStartTs' || timeTsInf == 'timeOrderTs'
                                        ? 'errorBorder'
                                        : ''
                                "
                                type="date"
                                @change="timeValidation('startTimeValue')"
                                placeholder="开始日期"
                            ></el-date-picker>
                            <el-date-picker
                                v-model="timeValue2"
                                :class="
                                    timeTsInf == 'timeEndTs' || timeTsInf == 'timeOrderTs'
                                        ? 'errorBorder'
                                        : ''
                                "
                                type="date"
                                @change="timeValidation('endTimeValue')"
                                placeholder="结束日期"
                            ></el-date-picker>
                        </div>
                    </div>
                    <div
                        :style="{
                            visibility: isDisTimeStartTs ? 'visible' : 'hidden',
                        }"
                        class="time_input_prompt"
                    >
                        {{ promptInf[timeTsInf] }}
                    </div>
                </div>
                <div class="area_btn">
                    <span class="ele_area_btn" v-for="(item, index) in bufferBtn" :key="index">
                        <el-upload
                            v-if="!isPhone && item.toolTitle === 'buffer_upload'"
                            drag
                            class="fileChoice"
                            :auto-upload="false"
                            :show-file-list="false"
                            :on-change="drawArea && drawArea.parsingShape.bind(drawArea)"
                            action=""
                        >
                            <img
                                type="file"
                                :src="
                                    clickPng === index || mouseroverPng === index
                                        ? item.hoverUrl
                                        : item.imgUrl
                                "
                                title="上传矢量文件"
                                alt
                                @mouseover="overFun(0, index)"
                                @mouseout="overFun(1, index)"
                            />
                        </el-upload>
                        <img
                            v-else-if="
                                !isPhone ||
                                    (isPhone &&
                                        item.toolTitle !== 'buffer_upload' &&
                                        item.toolTitle !== 'buffer_area')
                            "
                            @click="changeTools(index, item)"
                            :src="
                                clickPng === index || mouseroverPng === index
                                    ? item.hoverUrl
                                    : item.imgUrl
                            "
                            @mouseover="overFun(0, index)"
                            @mouseout="overFun(1, index)"
                        />
                    </span>
                </div>
                <div class="dataQueryParam_resolution">
                    <div class="title">
                        <img class="img_right" src="./theme/img/resolution.png" />
                        分辨率
                    </div>
                    <div class="check_box">
                        <el-checkbox
                            :indeterminate="isIndeterminate"
                            v-model="resolutionCheckAll"
                            @change="resolutionCheckAllChange"
                        >
                            全选
                        </el-checkbox>
                        <el-checkbox-group
                            v-model="checkedResolution"
                            @change="resolutionCheckEleChange"
                        >
                            <el-checkbox
                                v-for="eleResolution in resolutions"
                                :label="eleResolution.code"
                                :key="eleResolution.code"
                            >
                                {{ eleResolution.name }}m
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
                <div class="dataQueryParam_type">
                    <div class="dataQueryParam_sensor_title">
                        <div class="title">
                            <img class="img_right" src="./theme/img/satellite.png" />
                            <span>类型</span>
                        </div>

                        <div class="check_box">
                            <el-checkbox
                                :indeterminate="type_isIndeterminate"
                                v-model="typeCheckAll"
                                @change="typeCheckAllChange"
                            >
                                全选
                            </el-checkbox>
                            <el-checkbox-group
                                v-model="checkedType"
                                size="small"
                                @change="typeCheckEleChange"
                            >
                                <el-checkbox v-for="item in typeList" :label="item" :key="item">
                                    {{ item }}
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                </div>
                <span v-if="isPhone" class="editor_btn" @click="sureBtn">确定</span>
            </div>
        </div>
    </div>
</template>

<script>
/* global Cesium viewer */
import paramManager from './paramManager.js';
import DrawArea from './draw_area';
export default {
    name: 'dataQueryParam',
    props: ['clearToolArea'],
    mounted() {
        this.saveDefaultParam();
        this.drawArea = new DrawArea(() => {
            this.clickPng = null;
        });
    },
    data() {
        return {
            isPhone: this.$store.state.isPhone,
            isShowParam: true,
            nameParam: '',
            drawArea: null,
            valueTime: [],
            timeValue1: null,
            timeValue2: null,
            timeTsInf: '',
            isDisTimeStartTs: false, // 时间输入错误的提示

            bufferBtn: [
                {
                    imgUrl: this.$store.state.isPhone ? require('./theme/imgPhone/point0.png') : require('./theme/img/point0.png'),
                    hoverUrl: this.$store.state.isPhone ? require('./theme/imgPhone/point1.png') : require('./theme/img/point1.png'),
                    toolTitle: 'buffer_point',
                    fun_buffer_point: 'point_draw',
                },
                {
                    imgUrl: require('./theme/img/area0.jpg'),
                    hoverUrl: require('./theme/img/area1.jpg'),
                    toolTitle: 'buffer_area',
                    fun_buffer_area: 'area_draw',
                },
                {
                    imgUrl: this.$store.state.isPhone ? require('./theme/imgPhone/round0.png') : require('./theme/img/round0.jpg'),
                    hoverUrl: this.$store.state.isPhone ? require('./theme/imgPhone/round1.png') : require('./theme/img/round1.jpg'),
                    toolTitle: 'buffer_round',
                    fun_buffer_round: 'round_draw',
                },
                {
                    imgUrl: this.$store.state.isPhone ? require('./theme/imgPhone/rectangular0.png') : require('./theme/img/rectangular0.jpg'),
                    hoverUrl: this.$store.state.isPhone ? require('./theme/imgPhone/rectangular1.png') : require('./theme/img/rectangular1.jpg'),
                    toolTitle: 'buffer_rectangular',
                    fun_buffer_rectangular: 'rectangular_draw',
                },
                {
                    imgUrl: require('./theme/img/upload0.jpg'),
                    hoverUrl: require('./theme/img/upload1.jpg'),
                    toolTitle: 'buffer_upload',
                    fun_buffer_upload: 'upload_draw',
                },
                {
                    imgUrl: this.$store.state.isPhone ? require('./theme/imgPhone/queryAllArea0.png') : require('./theme/img/queryAllArea0.png'),
                    hoverUrl: this.$store.state.isPhone ? require('./theme/imgPhone/queryAllArea1.png') : require('./theme/img/queryAllArea1.png'),
                    toolTitle: 'allArea',
                    fun_allArea: 'AllArea',
                },
            ],
            clickPng: null,
            mouseroverPng: null,

            resolutionCheckAll: true, // 分辨率全选
            checkedResolution: ['16'], // 分辨率已选中
            resolutions: [
                // { code: '8', name: '8' },
                { code: '16', name: '16' },
            ],
            isIndeterminate: false, // 分辨率没有全选

            type_isIndeterminate: false,
            typeCheckAll: true,
            typeList: ['NDVI', 'LAI', 'REF', 'FVC', 'ALBEDO'],
            checkedType: ['NDVI', 'LAI', 'REF', 'FVC', 'ALBEDO'], // 类型已选中
            promptInf: {
                timeOrderTs: '您的结束时间大于开始时间。',
            },

            needDefaultParam: [
                'nameParam',
                'valueTime',
                'timeValue1',
                'timeValue2',
                'resolutionCheckAll',
                'checkedResolution',
                'typeCheckAll',
                'checkedType',
                'isDisTimeStartTs',
                'timeTsInf',
            ],
            defaultParam: {},
        };
    },
    methods: {
        beginQuery() {
            paramManager.queryData(false);
        },
        // 查询条件变化
        queryChange(type) {
            paramManager.setParam(type, this[type]);
        },
        // 类型全选状态改变的回调
        typeCheckAllChange(val) {
            this.checkedType = val ? this.typeList : [];
            this.type_isIndeterminate = false;
            paramManager.setParam('checkedType', this.checkedType);
        },
        // 分辨率单条状态改变的回调
        typeCheckEleChange(val) {
            let checkedCount = val.length;
            this.typeCheckAll = checkedCount === this.typeList.length;
            this.type_isIndeterminate = checkedCount > 0 && checkedCount < this.typeList.length;
            paramManager.setParam('checkedType', this.checkedType);
        },

        // 分辨率全选状态改变的回调
        resolutionCheckAllChange(val) {
            this.checkedResolution = val ? this.resolutions.map(item => item.code) : [];
            this.isIndeterminate = false;
            paramManager.setParam('imageGsd', this.checkedResolution);
        },
        // 分辨率单条状态改变的回调
        resolutionCheckEleChange(val) {
            let checkedCount = val.length;
            this.resolutionCheckAll = checkedCount === this.resolutions.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.resolutions.length;
            paramManager.setParam('imageGsd', this.checkedResolution);
        },
        // 输入一个时间
        timeValidation() {
            this.valueTime = [];
            this.isDisTimeStartTs = false;
            this.timeTsInf = '';
            if (this.timeValue1 && this.timeValue2) {
                if (this.timeValue1.getTime() < this.timeValue2.getTime()) {
                    this.isDisTimeStartTs = false;
                    this.valueTime.push(this.timeValue1);
                    this.valueTime.push(this.timeValue2);
                } else {
                    this.isDisTimeStartTs = true;
                    this.timeTsInf = 'timeOrderTs';
                }
            } else if (!this.timeValue1 && !this.timeValue2) {
                this.isDisTimeStartTs = false;
            } else {
                this.isDisTimeStartTs = true;
                if (this.timeValue1) {
                    this.timeTsInf = 'timeEndTs';
                } else {
                    this.timeTsInf = 'timeStartTs';
                }
            }
            this.queryChange('valueTime');
        },
        // 重置所有查询条件
        resetAllQueryParam() {
            Object.keys(this.defaultParam).forEach(item => {
                this[item] = this.defaultParam[item];
            });
            this.clickPng = null;
            let drawHelper = new Cesium.C_DrawHelper(viewer.scene);
            drawHelper.clearMarker();
            this.drawArea.drawStartCallback();
            paramManager.resetQueryParam();
        },
        // 存放默认变量
        saveDefaultParam() {
            this.needDefaultParam.forEach(item => {
                this.defaultParam[item] = this[item];
            });
        },
        // 地图工具图片悬浮
        overFun(numCode, index) {
            if (numCode === 0) {
                this.mouseroverPng = index;
            } else {
                this.mouseroverPng = null;
            }
        },
        // 地图工具图标点击
        changeTools(index, item) {
            this[item['fun_' + item.toolTitle]]();
            this.clickPng = index;
        },
        // 绘制点
        point_draw() {
            this.drawArea.drawPoint();
        },
        // 绘制多面
        area_draw() {
            this.drawArea.drawArea();
        },
        // 绘制圆
        round_draw() {
            this.drawArea.drawCircle();
        },
        // 绘制方形
        rectangular_draw() {
            this.drawArea.drawExtent();
        },
        // 上传数据
        upload_draw(...args) {
            this.drawArea.parsingShape(...args);
        },
        // 查询全部范围的数据
        AllArea() {
            this.drawArea.deleteArea();
        },
        fousePoint() {
            $('#name_input').focus();
        },
        // 进入列表界面
        sureBtn() {
            this.$parent.showParam = false;
            this.$parent.showList = true;
        },
        // 关闭查询
        closeQuery() {
            this.$parent.ctrllistDis('clear');
        },
    },
    watch: {
        nameParam(newVal) {
            this.queryChange('nameParam');
        },
    },
};
</script>

<style lang="scss">
@import 'theme/css/dataQueryParamStyle.scss';
</style>
